<script setup>
import {ref} from "vue"
import {useRouter} from "vue-router";
const router = useRouter()
const list = ref([
  {
    model: ref([]),
    name: 'photo',
    label: '商品图片',
    pla: '请上传图片',
    isUploader: true,
  },
  {
    model: ref(''),
    name: 'name',
    label: '仓库名称',
    pla: '请输入仓库名称'
  },
  {
    model: ref(''),
    name: 'type',
    label: '仓库类型',
    pla: '请选择仓库类型'
  },
  {
    model: ref(''),
    name: 'dept',
    label: '绑定部门',
    pla: '请选择绑定部门'
  },
  {
    model: ref(''),
    name: 'head',
    label: '负责人',
    pla: '请输入负责人'
  },
  {
    model: ref(''),
    name: 'address',
    label: '地址',
    pla: '请选择地址'
  },
  {
    model: ref(''),
    name: 'square',
    label: '面积',
    pla: '请输入面积'
  },
  {
    model: ref(''),
    name: 'remark',
    label: '备注',
    pla: '请输入备注信息'
  }
])
const result = ref('');
const pickerValue = ref([]);
const showPicker = ref(false);
const deptValue = ref([])
const showDept = ref(false)
const deptColumns = [
  { text: '技术部', value: '0' },
  { text: '财务部', value: '1' },
]
const columns = [
  { text: '储存仓库', value: '0' },
  { text: '冷藏仓库', value: '1' },
];
const onConfirm = ({ selectedValues, selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  pickerValue.value = selectedValues;
  list.value = list.value.map(item => {
    if (item.name === 'type') {
      item.model = result.value;
      console.log(item.model, '---')
    }
    return item;
  });
  // list.value = [...list.value];
  // console.log(list.value);
  showPicker.value = false;
};
const confirmFn = ({ selectedValues, selectedOptions }) => {
  const text = selectedOptions[0]?.text;
  pickerValue.value = selectedValues;
  list.value = list.value.map(item => {
    if (item.name === 'dept') {
      item.model = text
      console.log(item.model, '---')
    }
    return item;
  });
  // list.value = [...list.value];
  // console.log(list.value);
  showPicker.value = false;
};
const handleFieldClick = (item) => {
  if (item.name === 'type') {
    showPicker.value = true;
  } else if (item.name === 'dept') {
    showDept.value = true
  }
};

</script>

<template>
  <div class="w-full roundCorner backgroundColor py-[10px]">
    <van-form>
      <van-cell-group inset>
        <van-field
            v-for="(item, index) in list"
            :required="item.name==='name'"
            :key="index"
            :name="item.name"
            :label="item.label"
            :placeholder="item.pla"
            :v-model="item.isUploader ? item.model : ''"
            :is-link="item.name === 'type' || item.name === 'dept'"
            @click="handleFieldClick(item)"
            :type="item.name==='remark'? 'textarea': 'text'"
        >
          <template #input v-if="item.isUploader">
            <van-uploader v-model="item.model" />
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
  </div>
  <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
    <van-picker
        :columns="columns"
        :model-value="pickerValue"
        @confirm="onConfirm"
        @cancel="showPicker = false"
    />
  </van-popup>
  <van-popup v-model:show="showDept" destroy-on-close position="bottom">
    <van-picker
        :columns="deptColumns"
        :model-value="deptValue"
        @confirm="confirmFn"
        @cancel="showDept = false"
    />
  </van-popup>
</template>

<style scoped lang="less">
::v-deep{
  .van-cell{
  }
}
</style>